<template >
	<view >
		<view style="height:92upx;position:fixed;top:0;background-color:#FD6801;width:750upx;z-index:99;">
			<view style="text-align:center;height:92upx;line-height:92upx;color:#FFFFFF;font-size:34upx;font-weight:700;">购物车</view>
			<view v-if="!flag" @click="manageAll()" style="width:80upx;height:92upx;float:right;margin-top:-92upx;line-height:92upx;">
				<text style="color:#FFFFFF;font-size:24upx;">{{manage}}</text>
			</view>
		</view>
		<view v-if="flag">
			<view style="width:750upx;height:92upx;"></view>
			<view style="text-align: center;margin-top: 50rpx;">
				<image src="../../static/nocart.png" style="width: 260rpx;height: 200rpx" mode=""></image>
				<view style="color: #999;margin-top: 30rpx;">购物车是空的</view>
			</view>
		</view>
		<view v-if="!flag">
			<view class="position-relative" style="background-color: #f6f6f6;">
				<view class="main-bg-color-bai rounded position-absolute top-0" style="width: 690upx;z-index: 12;left: 30upx;margin:90upx 0 200upx;">
					<view class="row py-3 px-1 font-md font-weight-6 border-bottom" style="text-indent:40upx;">
						谷雨颐嘉健康服务官方产品
					</view>
					<block v-for="(item,index) in carts" :key="index">
						<view class="row j-sb a-center flex-nowrap px-1 py-3 font-md font-weight-6 border-bottom">
							 <checkbox :checked="item.checked" @click="checkBox(index,item)"  />
							 <image @tap="detail(item.product_id)" :src="baseUrl+item.img" style="width: 222upx;height: 150upx;"></image>
							 <view class="" style="width: 350upx;" >
								<view @tap="detail(item.product_id)" class="title">{{item.title}}</view>
								<!-- <view @tap="detail(item.product_id)" style="color: #C8C7CC;">{{item.params}}</view> -->
								<view class="row j-sb a-center">
									<text @tap="detail(item.product_id)" class="main-text-color">￥{{item.price}}</text>
									<!-- <view class="border row" style="font-size:24upx;border-color:#EEEEEE;">
										<view @tap="sum(index)" class="border-right px-2 py-1">
											-
										</view>
										<view class="py-1 px-2" style="font-size:24upx;">
											{{item.buy_num}}
										</view>
										<view @tap="add(index)" class="border-left px-2 py-1">
											+
										</view>
									</view> -->
								</view>
							 </view>
						</view>
					</block>
					<!-- <view class="mt-3 j-sb row a-center py-3" style="background-color: #f6f6f6;">
						<view class="flex-1" style="border: 1px solid #666666;">
						</view>
						<view class="flex-1 text-center font-md">
							猜你喜欢
						</view>
						<view class="flex-1"  style="border: 1px solid #666666;">
						</view>
					</view>
					<view class="row j-sb pb-20" style="background-color: #f6f6f6;">
						<view class="row  flex-column main-bg-color-bai" style="width: 330upx;">
							<image style="background-color: #e6e6e6;height: 240upx;"></image>
							<view class="p-2 font-md font-weight-6">
								产品名称
							</view>
							<text class="p-2 main-text-color font-md">￥199</text>
						</view>
						<view class="row flex-column main-bg-color-bai" style="width: 330upx;">
							<image style="background-color: #e6e6e6;height: 240upx;"></image>
							<view class="p-2 font-md font-weight-6">
								产品名称
							</view>
							<text class="p-2 main-text-color font-md">￥199</text>
						</view>
					</view> -->
				</view>
			</view>
			<view class="position-fixed  p-1 px-3 row a-center j-sb" style="width: 750upx;bottom:96upx;background-color: #FFFFFF;z-index: 33;">
				<view>
					<!-- <checkbox :checked="checkAll" @click="checkAlls()"  />全选 -->
				</view>
				<view style="position:relative;">
					<button :class="{deletes:deletes == false}" size="mini" @click="deleteAll()" style="float:right;background-color: #ff6101;color: #FFFFFF;margin:10upx 30upx;border-radius:40upx;">删除</button>
					<text :class="{deletes:deletes == true}" style="float:left;height:70upx;line-height:70upx;">合计：<text class="main-text-color font-sm">￥<text class="font-md">{{moneys}}</text></text></text>
					<button :class="{deletes:deletes == true}" size="mini" @tap="topay" style="float:right;background-color: #ff6101;color: #FFFFFF;margin:10upx 30upx;border-radius:40upx;">结算</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/common/lib/request.js'
	export default {
		data() {
			return {
				baseUrl:request.common.baseUrl,
				manage:'管理',
				deletes:false,
				carts:[],
				checkAll:false,
				moneys:0,
				flag: false
			}
		},
		onLoad: function (option) {
			uni.setNavigationBarTitle({
				title: '购物车'
			});
			if(uni.getStorageSync('keyToken')){
				uni.request({
					url: request.common.baseUrl+'/api/cart/myCarts',
					data: {
						token:uni.getStorageSync('keyToken')
					},
					header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if(res.data.code==200){
							for (var j = 0; j < res.data.data.length; j++) {
								res.data.data[j].checked=false
							}
							this.carts=res.data.data
							if(this.carts.length){
								uni.setTabBarBadge({
								  index: 2,
								  text: JSON.stringify(this.carts.length),
								})
							}else{
								uni.removeTabBarBadge({
									index: 2,
								})
							}
						}
					}
				});
			}else{
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
		},
		onShow:function(){
			uni.request({
				url: request.common.baseUrl+'/api/cart/myCarts',
				data: {
					token:uni.getStorageSync('keyToken')
				},
				header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
				},
				success: (res) => {
					if(res.data.code==200){
						this.carts=[]
						for (var j = 0; j < res.data.data.length; j++) {
							res.data.data[j].checked=false
						}
						this.carts=res.data.data
					}
					if(this.carts.length == 0){
						this.flag = true
					}else {
						this.flag = false
						this.moneys=0
					}
					if(this.carts.length){
						uni.setTabBarBadge({
						  index: 2,
						  text: JSON.stringify(this.carts.length),
						})
					}else{
						uni.removeTabBarBadge({
							index: 2,
						})
					}
				}
			});
		},
		methods: {
			sum(index){
				if(this.carts[index].buy_num>1){
					this.carts[index].buy_num--
				}
				this.moneys=0
				for (var j = 0; j < this.carts.length; j++) {
					if(this.carts[j].checked==true){
						this.moneys=this.moneys+this.carts[j].buy_num*this.carts[j].price
					}
				}
				this.moneys=this.moneys.toFixed(2)
			},
			add(index){
				this.carts[index].buy_num++;
				this.moneys=0
				for (var j = 0; j < this.carts.length; j++) {
					if(this.carts[j].checked==true){
						this.moneys=this.moneys+this.carts[j].buy_num*this.carts[j].price
					}
				}
				this.moneys=this.moneys.toFixed(2)
			},
			topay(){
				var only_one=0;
				for (var j = 0; j < this.carts.length; j++) {
					if(this.carts[j].checked==true){
						only_one++;
					}
				}
				if(only_one==0){
					uni.showToast({
						title:'请选择一个',
						icon: 'none',
					})
				}else if(only_one>1){
					uni.showToast({
						title:'只能选择一个',
						icon: 'none',
					})
				}else if(only_one==1){
					uni.navigateTo({
						url:"../order/orders?carts="+JSON.stringify(this.carts)+'&moneys='+this.moneys
					})
				}
				
			},
			manageAll(){
				if(this.deletes==false){
					this.deletes=true
					this.manage='完成'
				}else if(this.deletes==true){
					this.deletes=false
					this.manage='管理'
				}
			},
			checkBox(index,item) {
				this.carts[index].checked=!this.carts[index].checked
				this.moneys=0
				for (var j = 0; j < this.carts.length; j++) {
					if(this.carts[j].checked==true){
						this.moneys=this.moneys+this.carts[j].buy_num*this.carts[j].price
					}
				}
				let allTrue=true
				let i=0
				while (i<this.carts.length){
					if(this.carts[i].checked==false){
						allTrue=false
						this.checkAll=false
					}
					i++
				}
				if(allTrue==true){
					this.checkAll=true
				}
				this.moneys=this.moneys.toFixed(2)
			},
			checkAlls: function (){
				if(this.checkAll==false){
					this.checkAll=true
					for (var j = 0; j < this.carts.length; j++) {
						this.carts[j].checked=true
					}
					
					this.moneys=0
					for (var j = 0; j < this.carts.length; j++) {
						if(this.carts[j].checked==true){
							this.moneys=this.moneys+this.carts[j].buy_num*this.carts[j].price
						}
					}
					this.moneys=this.moneys.toFixed(2)
				}else{
					this.checkAll=false
					for (var j = 0; j < this.carts.length; j++) {
						this.carts[j].checked=false
					}
					
					this.moneys=0
					for (var j = 0; j < this.carts.length; j++) {
						if(this.carts[j].checked==true){
							this.moneys=this.moneys+this.carts[j].buy_num*this.carts[j].price
						}
					}
					this.moneys=this.moneys.toFixed(2)
				}
			},
			deleteAll(){
				var that=this
				uni.showModal({
				    title: '提示',
				    content: '确定要删吗？',
				    success: function (res) {
				        if (res.confirm) {
							let ids=''
							for (var j = 0; j < that.carts.length; j++) {
								if(that.carts[j].checked==true){
									ids=ids+','+that.carts[j].id
								}
							}
							uni.request({
								url: request.common.baseUrl+'/api/cart/cancelCart',
								data: {
									token:uni.getStorageSync('keyToken'),
									id:ids
								},
								header: {
									'Content-Type':'application/json;charset=UTF-8',
									'Content-Type':'application/x-www-form-urlencoded'
								},
								success: (res) => {
									if(res.data.code==200){
										uni.request({
											url: request.common.baseUrl+'/api/cart/myCarts',
											data: {
												token:uni.getStorageSync('keyToken')
											},
											header: {
												'Content-Type':'application/json;charset=UTF-8',
												'Content-Type':'application/x-www-form-urlencoded'
											},
											success: (res) => {
												if(res.data.code==200){
													that.moneys=0
													that.carts=[]
													that.deletes=false
													that.checkAll=false
													that.manage='管理'
													for (var j = 0; j < res.data.data.length; j++) {
														res.data.data[j].checked=false
													}
													that.carts=res.data.data
												}else if(res.data.code==500){
													that.moneys=0
													that.carts=[]
													that.deletes=false
													that.checkAll=false
													that.manage='管理'
												}
												if(that.carts.length == 0){
													that.flag = true
												}else {
													that.flag = false
												}
												if(that.carts.length){
													uni.setTabBarBadge({
													  index: 2,
													  text: JSON.stringify(that.carts.length),
													})
												}else{
													uni.removeTabBarBadge({
														index: 2,
													})
												}
											}
										});
									}
								}
							});
				        } else if (res.cancel) {
				        }
				    }
				});
			},
			detail(product_id){
				uni.navigateTo({
					url:'/pages/goodinfo/goodinfo?id='+product_id
				})
			}
		}
	}
</script>

<style>
	checkbox{
		transform: scale(0.7,0.7)
	},
	.title{
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
	.deletes{
		display:none;
	}
</style>
